<script setup lang="ts">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, ref, watch } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
// import { selectionType } from '@/api/login/types'
import { GetUndoneCoursesApi } from '@/api/course'
import { getUserListApi } from '@/api/department'
import { useI18n } from 'vue-i18n'
import { ElSelect, ElOption, ElFormItem, ElTransfer } from 'element-plus'
const { t } = useI18n()
const { required } = useValidator()

const props = defineProps({
  currentRow: {
    type: Object,
    default: () => undefined
  },

  formSchema: {
    type: Array as PropType<FormSchema[]>,
    default: () => []
  }
})
interface selectionType {
  label: string
  value: string
  key?: string
  disabled?: Boolean
}
const chooes = ref<string[]>([])
const typeList = ref<selectionType[]>([])
const usersList = ref<selectionType[]>([])
// const GetCourseTypes = async () => {
//   const res = await GetUndoneCoursesApi()
//   res.data?.map((item) => {
//     typeList.value.push({
//       label: item.courseName + '   <' + item.courseTypeName + '>    老师:' + item.userName,
//       value: item.guid,
//       key: item.userNo + '$' + item.userName
//     })
//   })
//   const dt = await getUserListApi({ pageFlag: false })
//   let uList: selectionType[] = []
//   dt.data.pageModels?.map((item) => {
//     uList.push({
//       label: item.userNo + '-' + item.userName + '~' + item.depName,
//       value: item.userNo + '$' + item.userName,
//       key: item.userNo + '$' + item.userName,
//       disabled: false
//     })
//   })
//   usersList.value = uList
// }
// GetCourseTypes()

// const formSchema = ref<FormSchema[]>([
//   {
//     field: 'courseGuid',
//     label: '课程名称',
//     component: 'Select',
//     componentProps: {
//       clearable: true,
//       placeholder: '请选择课程名称',
//       onChange: (value) => {
//         console.log('selectChange---------', value)
//         if (value) {
//           let key = typeList.value.filter((item) => item.value == value)[0].key
//           usersList.value.map((item) => {
//             if (item.key == key) {
//               item.disabled = true
//             } else {
//               item.disabled = false
//             }
//           })
//         }
//       }
//     },
//     optionApi: () => {
//       return typeList.value
//     }
//   },
//   {
//     field: 'planTime',
//     label: '计划培训时间',
//     component: 'DatePicker',
//     componentProps: {
//       type: 'datetimerange',
//       valueFormat: 'YYYY-MM-DD HH:mm',
//       format: 'YYYY-MM-DD HH:mm',
//       StartPlaceholder: 'Start date',
//       EndPlaceholder: 'End date',
//       DefaultTime: [new Date(), new Date()]
//     }
//   },
//   {
//     field: 'plancontent',
//     label: '培训内容',
//     component: 'Input',
//     componentProps: {
//       type: 'textarea',
//       rows: 3
//     }
//   }
//   // {
//   //   field: 'remark',
//   //   label: t('common.remark'),
//   //   component: 'Input',
//   //   componentProps: {
//   //     type: 'textarea',
//   //     rows: 4
//   //   }
//   // }
// ])

const rules = reactive({
  scoreItem: [required()],
  remark: [required()],
  scoreValue: [required()]
})

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods
interface palnUser {
  UserNo: string
  UserName: string
}
const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    let arr: palnUser[] = []
    const formData = await getFormData()
    return formData
  }
}

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    chooes.value = currentRow.chooes
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  submit
})
</script>

<template>
  <Form :rules="rules" @register="formRegister" :schema="formSchema" :isCol="false" />
</template>
<style scoped>
:deep(.el-transfer-panel) {
  width: 300px !important;
}
</style>
